<script setup lang="ts">
  import { ref } from 'vue';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { childrenDataList } from '@/views/lhj-v1/util';
  import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon';
  import { queryServiceCateList } from '@/api-new2/service/service-classification';

  // 表格列定义
  const columns = [
    {
      title: '分类ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '分类级别',
      dataIndex: 'level',
      width: 120,
      render: ({ record }: any) => {
        return record.parentId === 0 ? '一级分类' : '二级分类';
      },
    },
    {
      title: '分类名称',
      dataIndex: 'title',
      width: 200,
    },
    {
      title: '所含项目总数',
      dataIndex: 'itemCount',
      width: 150,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 200,
    },
    // {
    //   title: '操作',
    //   align: 'center' as const,
    //   dataIndex: 'action',
    //   slotName: 'action',
    //   fixed: 'right',
    //   width: 120,
    // },
  ];

  // 搜索表单状态
  const searchForm = ref({
    title: '', // 分类名称
  });

  // 使用骨架屏hook
  const skeletonView = useSkeleton({
    apiFun: (params) => {
      // 获取服务分类列表
      return queryServiceCateList(params).then((res: any) => {
        // 转换为树形结构
        return childrenDataList(res || []);
      });
    },
    immediate: true,
  });

  // 重置搜索表单
  const handleReset = () => {
    searchForm.value.title = '';
    skeletonView.retry();
  };

  // 执行搜索
  const handleSearch = () => {
    skeletonView.execute({
      title: searchForm.value.title,
    });
  };




</script>

<template>
  <div class="flex flex-col">
    <!-- 搜索区域 -->
    <div class="flex">
      <a-form class="flex-1" :model="searchForm" label-align="right">
        <div class="form-wrapper">
          <a-form-item field="title" label="分类名称">
            <a-input
              v-model="searchForm.title"
              placeholder="请输入分类名称"
              allow-clear
            />
          </a-form-item>
        </div>
      </a-form>
      <div class=" flex">
        <div class="flex flex-col justify-between gap-2">
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
        </div>
      </div>
    </div>

    <!-- 分割线 -->
    <a-divider margin="0" />

    <!-- 骨架屏容器 -->
    <SkeletonView v-bind="skeletonView.bindProps">
      <template #default="{ data }">
        <!-- 表格区域 -->
        <!-- <div class="flex justify-between mb-3 mt-[20px]">
          <a-space>
            <a-button type="primary" @click="handleAdd">
              <template #icon>
                <icon-search />
              </template>
              新增
            </a-button>
          </a-space>
        </div> -->

        <!-- 表格 -->
        <a-table
          :data="data || []"
          :columns="columns"
          :row-key="'id'"
          :bordered="false"
        >
          <template #action="{ record }">
            <a-space>
              <!-- <a-button size="small" type="text" @click="handleDetail(record)"
                >详情</a-button
              >
              <a-button size="small" type="text" @click="handleEdit(record)"
                >编辑</a-button
              >
              <a-button size="small" type="text" status="danger">删除</a-button> -->
            </a-space>
          </template>
        </a-table>
      </template>
    </SkeletonView>

    <!-- 详情抽屉 -->
    <!-- <DetailDrawer v-bind="modalHandler.bindProps" /> -->
  </div>
</template>

<style lang="less" scoped>
  .form-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
  }
</style>
